<template>

  <div class="certification-review">
    <div class="certification-header">
      <h2>认证审核</h2>

      <div class="certification-subtitle">审核资质信息</div>
    </div>

    <!-- 如果有路由参数 id，直接显示单条记录 -->
    <el-card v-if="certificationData && fromId" class="review-card">
      <div class="card-header">
        <div class="user-info">
          <span class="user-id">用户: {{ certificationData.username}}</span>
          <el-tag :type="getStatusType(certificationData.isOk)" size="medium" effect="plain">
            {{ getStatusText(certificationData.isOk) }}
          </el-tag>
        </div>
        <div class="submit-time" v-if="certificationData.createTime">
          提交时间: {{ certificationData.createTime }}
        </div>
      </div>



      <el-row :gutter="20" class="certification-content">
        <el-col :xs="24" :sm="8" v-if="certificationData.idCardRight">
          <div class="document-card">
            <div class="document-title">身份证正面</div>
            <div class="document-image">
              <el-image
                :src="certificationData.idCardRight"
                fit="cover"
                :preview-src-list="[certificationData.idCardRight]"
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline"></i>
                  <span>加载失败</span>
                </div>
              </el-image>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="8" v-if="certificationData.idCardBack">
          <div class="document-card">
            <div class="document-title">身份证反面</div>
            <div class="document-image">
              <el-image
                :src="certificationData.idCardBack"
                fit="cover"
                :preview-src-list="[certificationData.idCardBack]"
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline"></i>
                  <span>加载失败</span>
                </div>
              </el-image>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="8" v-if="certificationData.businessLicense">
          <div class="document-card">
            <div class="document-title">营业执照</div>
            <div class="document-image">
              <el-image
                :src="certificationData.businessLicense"
                fit="cover"
                :preview-src-list="[certificationData.businessLicense]"
              >
                <div slot="error" class="image-error">
                  <i class="el-icon-picture-outline"></i>
                  <span>加载失败</span>
                </div>
              </el-image>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 审核记录 -->
      <div class="review-history" v-if="certificationData.isOk !== 0">
        <div class="section-title">
          <i class="el-icon-time"></i>
          <span>审核记录</span>
        </div>
        <div class="history-content">
          <div class="review-item" v-if="certificationData.isOk === 1">
            <div class="review-icon success">
              <i class="el-icon-check"></i>
            </div>
            <div class="review-detail">
              <div class="review-result success">已通过</div>
              <div class="review-time">{{ certificationData.updateTime || '未知时间' }}</div>
            </div>
          </div>
          <div class="review-item" v-if="certificationData.isOk === 2">
            <div class="review-icon reject">
              <i class="el-icon-close"></i>
            </div>
            <div class="review-detail">
              <div class="review-result reject">未通过</div>
              <div class="review-reason" v-if="certificationData.failedReason">
                原因: {{ certificationData.failedReason }}
              </div>
              <div class="review-time">{{ certificationData.updateTime || '未知时间' }}</div>
            </div>
          </div>
        </div>
      </div>



      <!-- 未通过原因输入框 -->
      <el-form v-if="showReasonInput" ref="reasonForm" :model="reasonForm" :rules="reasonRules" class="reason-form">
        <div class="section-title">
          <i class="el-icon-warning"></i>
          <span>拒绝原因</span>
        </div>
        <el-form-item prop="reason">
          <el-input
            v-model="reasonForm.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入未通过原因，将通知给申请人"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <div class="action-buttons" v-if="certificationData.isOk === 0">
        <el-button type="success" icon="el-icon-check" @click="handlePass">通过认证</el-button>
        <el-button type="danger" icon="el-icon-close" @click="showReasonInput = true" v-if="!showReasonInput">不通过</el-button>
        <el-button type="danger" icon="el-icon-close" @click="handleUnpass" v-if="showReasonInput">确认不通过</el-button>
        <el-button @click="showReasonInput = false" v-if="showReasonInput">取消</el-button>
      </div>

      <!-- 在单条记录展示中添加角色信息 -->
      <el-descriptions title="认证信息" :column="1" border>
        <!-- ... 其他现有的描述项 ... -->

        <!-- 添加采购商角色展示 -->
        <el-descriptions-item label="申请角色" v-if="getPurchaserRoleInfo(certificationData.roleKey)">
          <div class="role-info">
            <el-tag type="primary" effect="plain">
              {{ getPurchaserRoleInfo(certificationData.roleKey).label }}
            </el-tag>
            <div class="role-description">
              {{ getPurchaserRoleInfo(certificationData.roleKey).description }}
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 如果没有 id，显示列表 -->
    <div class="certification-list" v-else>
      <div class="list-header">
        <div class="left">
          <el-radio-group v-model="listFilter" size="medium" @change="handleFilterChange">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="0">待审核</el-radio-button>
            <el-radio-button label="1">已通过</el-radio-button>
            <el-radio-button label="2">未通过</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <el-input
            placeholder="搜索用户名称"
            v-model="searchKeyword"
            clearable
            prefix-icon="el-icon-search"
            @clear="handleSearch"
            @keyup.enter.native="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </div>
      </div>

      <el-table
        :data="filteredData"
        border
        style="width: 100%"
        v-loading="loading"
        @row-click="handleRowClick"
        :header-cell-style="{background:'#f5f7fa', color:'#606266'}"
      >
        <el-table-column prop="userName" label="用户名称" width="100" align="center"></el-table-column>
        <el-table-column prop="roleName" label="用户身份" width="150" align="center"></el-table-column>
        <el-table-column label="认证状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.isOk)" effect="plain">
              {{ getStatusText(scope.row.isOk) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="身份证" width="220" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.idCardRight"
              :src="scope.row.idCardRight"
              style="width: 120px; height: 70px; object-fit: cover;"
              :preview-src-list="[scope.row.idCardRight]"
            >
              <div slot="error" class="table-image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <span v-else class="no-image">未上传</span>
          </template>
        </el-table-column>
        <el-table-column label="营业执照" width="220" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.businessLicense"
              :src="scope.row.businessLicense"
              style="width: 120px; height: 70px; object-fit: cover;"
              :preview-src-list="[scope.row.businessLicense]"
            >
              <div slot="error" class="table-image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <span v-else class="no-image">未上传</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" width="180" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime || '未知' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" @click.stop="handleRowClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        v-if="total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      >
      </el-pagination>

      <!-- 弹窗显示选中记录详情 -->
      <el-dialog
        title="认证详情"
        :visible.sync="dialogVisible"
        width="70%"
        :close-on-click-modal="false"
        custom-class="certification-dialog"
      >
        <div v-if="selectedCertification" class="dialog-content">
          <div class="dialog-header">
            <div class="dialog-user-info">
              <div class="user-id">用户名称: {{ selectedCertification.userName }}</div>
              <el-tag :type="getStatusType(selectedCertification.isOk)" effect="plain">
                {{ getStatusText(selectedCertification.isOk) }}
              </el-tag>
            </div>
            <div class="dialog-time" v-if="selectedCertification.createTime">
              提交时间: {{ selectedCertification.createTime }}
            </div>
          </div>

          <el-divider></el-divider>

          <el-row :gutter="20" class="certification-content">
            <el-col :xs="24" :sm="8" v-if="selectedCertification.idCardRight">
              <div class="document-card">
                <div class="document-title">身份证正面</div>
                <div class="document-image">
                  <el-image
                    :src="selectedCertification.idCardRight"
                    fit="cover"
                    :preview-src-list="[selectedCertification.idCardRight]"
                  >
                    <div slot="error" class="image-error">
                      <i class="el-icon-picture-outline"></i>
                      <span>加载失败</span>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="8" v-if="selectedCertification.idCardBack">
              <div class="document-card">
                <div class="document-title">身份证反面</div>
                <div class="document-image">
                  <el-image
                    :src="selectedCertification.idCardBack"
                    fit="cover"
                    :preview-src-list="[selectedCertification.idCardBack]"
                  >
                    <div slot="error" class="image-error">
                      <i class="el-icon-picture-outline"></i>
                      <span>加载失败</span>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-col>

            <el-col :xs="24" :sm="8" v-if="selectedCertification.businessLicense">
              <div class="document-card">
                <div class="document-title">营业执照</div>
                <div class="document-image">
                  <el-image
                    :src="selectedCertification.businessLicense"
                    fit="cover"
                    :preview-src-list="[selectedCertification.businessLicense]"
                  >
                    <div slot="error" class="image-error">
                      <i class="el-icon-picture-outline"></i>
                      <span>加载失败</span>
                    </div>
                  </el-image>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- 审核记录 -->
          <div class="review-history" v-if="selectedCertification.isOk !== 0">
            <div class="section-title">
              <i class="el-icon-time"></i>
              <span>审核记录</span>
            </div>
            <div class="history-content">
              <div class="review-item" v-if="selectedCertification.isOk === 1">
                <div class="review-icon success">
                  <i class="el-icon-check"></i>
                </div>
                <div class="review-detail">
                  <div class="review-result success">已通过</div>
                  <div class="review-time">{{ selectedCertification.updateTime || '未知时间' }}</div>
                </div>
              </div>
              <div class="review-item" v-if="selectedCertification.isOk === 2">
                <div class="review-icon reject">
                  <i class="el-icon-close"></i>
                </div>
                <div class="review-detail">
                  <div class="review-result reject">未通过</div>
                  <div class="review-reason" v-if="selectedCertification.failedReason">
                    原因: {{ selectedCertification.failedReason }}
                  </div>
                  <div class="review-time">{{ selectedCertification.updateTime || '未知时间' }}</div>
                </div>
              </div>
            </div>
          </div>

          <el-form v-if="showReasonInput" ref="reasonForm" :model="reasonForm" :rules="reasonRules" class="reason-form">
            <div class="section-title">
              <i class="el-icon-warning"></i>
              <span>拒绝原因</span>
            </div>
            <el-form-item prop="reason">
              <el-input
                v-model="reasonForm.reason"
                type="textarea"
                :rows="3"
                placeholder="请输入未通过原因，将通知给申请人"
              ></el-input>
            </el-form-item>
          </el-form>

          <div class="dialog-footer">
            <div class="action-buttons" v-if="selectedCertification.isOk === 0">
              <el-button type="success" icon="el-icon-check" @click="handlePass">通过认证</el-button>
              <el-button type="danger" icon="el-icon-close" @click="showReasonInput = true" v-if="!showReasonInput">不通过</el-button>
              <el-button type="danger" icon="el-icon-close" @click="handleUnpass" v-if="showReasonInput">确认不通过</el-button>
              <el-button @click="showReasonInput = false" v-if="showReasonInput">取消</el-button>
            </div>
            <el-button type="primary" icon="el-icon-back" @click="dialogVisible = false" v-else>返回列表</el-button>
          </div>

          <!-- 在弹窗详情中也添加角色信息 -->
          <div class="role-section" v-if="getPurchaserRoleInfo(selectedCertification.roleKey)">
            <div class="section-title">
              <i class="el-icon-user"></i>
              <span>申请角色</span>
            </div>
            <div class="role-content">
              <el-tag type="primary" effect="plain">
                {{ getPurchaserRoleInfo(selectedCertification.roleKey).label }}
              </el-tag>
              <div class="role-description">
                {{ getPurchaserRoleInfo(selectedCertification.roleKey).description }}
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getCertificationList, passCertification, unpassCertification, getCertificationById } from '@/api/auth/auth';
import { getPurchaserRoleByKey } from '@/utils/roleEnum';

export default {
  name: 'CertificationReview',
  data() {
    return {
      certificationData: null, // 单条记录或列表
      selectedCertification: null, // 选中的认证记录（列表模式）
      dialogVisible: false, // 控制弹窗显示
      showReasonInput: false, // 控制未通过原因输入框
      loading: false, // 表格加载状态
      fromId: false, // 是否通过路由参数加载单条记录
      reasonForm: {
        reason: '',
      },
      reasonRules: {
        reason: [{ required: true, message: '请输入未通过原因', trigger: 'blur' }],
      },
      listFilter: 'all', // 列表筛选：all, 0(待审核), 1(已通过), 2(未通过)
      searchKeyword: "", // 搜索关键词
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0, // 添加总数记录
    };
  },
  computed: {
    // 根据筛选条件和搜索关键字过滤数据
    filteredData() {
      if (!this.certificationData || !Array.isArray(this.certificationData)) {
        return [];
      }

      let result = this.certificationData;

      // 状态筛选
      if (this.listFilter !== 'all') {
        result = result.filter(item => item.isOk === parseInt(this.listFilter));
      }

      // 关键词搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        result = result.filter(item =>
          item.userName.toString().includes(keyword)
        );
      }

      return result;
    },

    // 当前页的数据
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredData.slice(start, end);
    }
  },
  created() {
    const id = this.$route.query.id; // 获取路由参数 id
    if (id) {
      this.fromId = true;
      this.fetchCertificationById(id); // 加载单条记录
    } else {
      this.fetchCertificationData(); // 加载列表
    }
  },
  methods: {
    // 获取认证列表
    async fetchCertificationData() {
      this.loading = true;
      try {
        const response = await getCertificationList(this.queryParams);
        console.log('获取认证数据', response);
        this.certificationData = response.rows; // 存储列表
        this.total = response.total; // 保存总数
      } catch (error) {
        this.$message.error('获取认证数据失败');
        console.error('获取认证数据失败', error);
      } finally {
        this.loading = false;
      }
    },

    // 根据 id 获取单条认证记录
    async fetchCertificationById(id) {
      this.loading = true;
      try {
        const response = await getCertificationById(id);
        console.log('获取单条认证数据', response);
        this.certificationData = response; // 存储单条记录
      } catch (error) {
        this.$message.error('获取认证详情失败');
        console.error('获取认证详情失败', error);
      } finally {
        this.loading = false;
      }
    },

    // 点击行或按钮选择记录（列表模式）
    handleRowClick(row) {
      this.selectedCertification = row;
      this.dialogVisible = true;
      this.showReasonInput = false;
      this.reasonForm.reason = '';
    },

    // 处理认证通过
    async handlePass() {
      const id = this.fromId ? this.certificationData.id : this.selectedCertification.id; // 根据模式选择 id
      console.log('当前id', id);
      if (!id) {
        this.$message.error('用户ID不能为空');
        return;
      }
      this.$confirm('确认通过该用户的认证吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            console.log('认证通过', id);
            await passCertification(id);
            this.$message.success('认证通过成功');
            if (this.fromId) {
              this.fetchCertificationById(id); // 刷新单条记录
            } else {
              this.dialogVisible = false;
              this.fetchCertificationData(); // 刷新列表
            }
          } catch (error) {
            this.$message.error('认证通过失败');
            console.error('认证通过失败', error);
          }
        })
        .catch(() => {
          this.$message.info('已取消操作');
        });
    },

    // 处理认证不通过
    async handleUnpass() {
      const id = this.fromId ? this.certificationData.id : this.selectedCertification.id; // 根据模式选择 id
      this.$refs.reasonForm.validate(async (valid) => {
        if (valid) {
          this.$confirm('确认拒绝该用户的认证吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(async () => {
              try {
                // 将 id 和 reason 封装成对象传递
                const requestData = { id, reason: this.reasonForm.reason };
                await unpassCertification(id, requestData);
                console.log('认证拒绝', id, this.reasonForm.reason);
                this.$message.success('认证拒绝成功');
                if (this.fromId) {
                  this.fetchCertificationById(id); // 刷新单条记录
                } else {
                  this.dialogVisible = false;
                  this.fetchCertificationData(); // 刷新列表
                }
                this.showReasonInput = false; // 成功后隐藏输入框
                this.reasonForm.reason = ''; // 清空输入框
              } catch (error) {
                this.$message.error('认证拒绝失败');
                console.error('认证拒绝失败', error);
              }
            })
            .catch(() => {
              this.$message.info('已取消操作');
            });
        } else {
          this.$message.error('请填写未通过原因');
        }
      });
    },

    // 根据 isOk 返回状态文本
    getStatusText(isOk) {
      switch (isOk) {
        case 0:
          return '待审核';
        case 1:
          return '已通过';
        case 2:
          return '未通过';
        default:
          return '未知';
      }
    },

    // 根据 isOk 返回标签类型
    getStatusType(isOk) {
      switch (isOk) {
        case 0:
          return 'warning';
        case 1:
          return 'success';
        case 2:
          return 'danger';
        default:
          return 'info';
      }
    },

    // 处理筛选变更
    handleFilterChange() {
      this.currentPage = 1; // 重置为第一页
    },

    // 处理搜索
    handleSearch() {
      this.currentPage = 1; // 重置为第一页
    },

    // 处理页码变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.fetchCertificationData();
    },

    // 处理每页条数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.fetchCertificationData();
    },

    // 获取采购商角色信息
    getPurchaserRoleInfo(roleKey) {
      if (!roleKey) return null;
      return getPurchaserRoleByKey(roleKey);
    }
  },
};
</script>

<style lang="scss">
.certification-review {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);

  .certification-header {
    margin-bottom: 20px;

    h2 {
      font-size: 22px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
    }

    .certification-subtitle {
      font-size: 14px;
      color: #606266;
    }
  }

  .review-card {
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;

    .card-header {
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 20px;

      .user-info {
        display: flex;
        align-items: center;
        gap: 15px;

        .user-id {
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }
      }

      .submit-time {
        color: #909399;
        font-size: 14px;
      }
    }

    .certification-content {
      margin-bottom: 20px;
    }

    .document-card {
      background: #f9f9f9;
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      .document-title {
        padding: 10px 15px;
        background: #ebeef5;
        color: #606266;
        font-weight: 500;
        font-size: 14px;
        border-bottom: 1px solid #e0e3e9;
      }

      .document-image {
        height: 200px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;

        .el-image {
          width: 100%;
          height: 100%;

          &::v-deep .el-image__inner {
            object-fit: contain;
          }
        }

        .image-error {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #909399;
          height: 100%;

          i {
            font-size: 32px;
            margin-bottom: 10px;
          }
        }
      }
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 15px;
      font-size: 16px;
      font-weight: 500;
      color: #303133;

      i {
        color: #409EFF;
      }
    }

    .review-history {
      margin-top: 30px;
      margin-bottom: 20px;

      .history-content {
        background: #f9f9f9;
        border-radius: 4px;
        padding: 15px;
      }

      .review-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }

        .review-icon {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 12px;
          flex-shrink: 0;

          &.success {
            background: #67C23A;
            color: white;
          }

          &.reject {
            background: #F56C6C;
            color: white;
          }

          i {
            font-size: 14px;
          }
        }

        .review-detail {
          flex: 1;

          .review-result {
            font-weight: 500;
            margin-bottom: 5px;

            &.success {
              color: #67C23A;
            }

            &.reject {
              color: #F56C6C;
            }
          }

          .review-reason {
            background: #FEF0F0;
            padding: 8px 12px;
            border-radius: 4px;
            color: #F56C6C;
            margin-bottom: 8px;
            font-size: 14px;
          }
          .review-time {
            color: #909399;
            font-size: 13px;
          }
        }
      }
    }

    .reason-form {
      margin-top: 20px;
      margin-bottom: 20px;

      .el-form-item__content {
        margin-left: 0 !important;
      }

      .el-textarea__inner {
        background-color: #f9f9f9;
      }
    }

    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 30px;

      .el-button {
        padding: 12px 20px;
        font-size: 14px;
      }
    }
  }

  .certification-list {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .left {
        .el-radio-button__inner {
          padding: 10px 20px;
        }
      }

      .right {
        width: 250px;

        .el-input__inner {
          height: 36px;
        }
      }
    }

    .table-image-error {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 70px;
      background-color: #f5f7fa;

      i {
        font-size: 24px;
        color: #909399;
      }
    }

    .no-image {
      color: #909399;
      font-size: 13px;
    }

    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }

  .certification-dialog {
    .el-dialog__header {
      padding: 15px 20px;
      background: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;

      .el-dialog__title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }

    .el-dialog__body {
      padding: 20px 25px;
    }

    .dialog-content {
      .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .dialog-user-info {
          display: flex;
          align-items: center;
          gap: 15px;

          .user-id {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
          }
        }

        .dialog-time {
          color: #909399;
          font-size: 14px;
        }
      }

      .dialog-footer {
        margin-top: 30px;
        display: flex;
        justify-content: center;
      }
    }
  }

  .role-info {
    .role-description {
      margin-top: 8px;
      color: #909399;
      font-size: 13px;
      line-height: 1.4;
    }
  }

  .role-section {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 4px;

    .role-content {
      margin-top: 10px;

      .role-description {
        margin-top: 8px;
        color: #909399;
        font-size: 13px;
        line-height: 1.4;
        background: #fff;
        padding: 8px 12px;
        border-radius: 4px;
      }
    }
  }

  // 确保标签样式统一
  .el-tag--primary.el-tag--plain {
    background-color: #ecf5ff;
    border-color: #b3d8ff;
    color: #409EFF;
  }
}

// 覆盖 Element UI 样式
.el-tag {
  &.el-tag--warning {
    background-color: #FEF9E7;
    border-color: #F9E4A0;
    color: #E6A23C;
  }

  &.el-tag--success {
    background-color: #F0F9EB;
    border-color: #C2E7B0;
    color: #67C23A;
  }

  &.el-tag--danger {
    background-color: #FEF0F0;
    border-color: #FAC4C4;
    color: #F56C6C;
  }
}

.el-table {
  th {
    font-weight: 600;
  }

  .el-table__row {
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f0f7ff !important;
    }
  }
}
</style>
